<template>
  <div class="max">
    <my-header :backBtn="true"></my-header>
    <div class="tl cont-nof">
      <div class="weui-navbar">
        <div class="weui-navbar__item " :class="{'weui-bar__item_on':menu===0}" @click="menuChange(0)">
          我要反馈
        </div>
        <div class="weui-navbar__item" :class="{'weui-bar__item_on':menu===1}" @click="menuChange(1)">
          反馈记录
        </div>
      </div>
      <div class="tl leave-list">
        <div v-if="menu===0" class="max" style="overflow: auto;">
          <div class="weui-cells weui-cells_form" style="margin-top: 1rem;">
            <div class="weui-cell">
              <div class="weui-cell__hd"><label class="weui-label"><label style="color: red">* </label>标题</label></div>
              <div class="weui-cell__bd">
                <input class="weui-input" v-model="postData.title" type="text" placeholder="标题内容"/>
              </div>
            </div>
            <div class="weui-cell">
              <div class="weui-cell__bd">
                <textarea class="weui-textarea my-textatea" placeholder="请输入反馈内容" rows="5"
                          v-model="postData.content"></textarea>
              </div>
            </div>
          </div>
          <div class="submitBtn">
            <a href="javascript:;" class="weui-btn weui-btn_block weui-btn_primary my-weui-btn" @click="submit">提交</a>
          </div>
        </div>
        <div class="weui-panel__bd" v-else>
          <div class="weui-loadmore weui-loadmore_line" v-if="list.length==0">
            <span class="weui-loadmore__tips">暂无数据</span>
          </div>
          <div class="weui-panel weui-panel_access">
            <div class="weui-panel__bd">
              <div class="weui-media-box weui-media-box_text" v-for="item in list">
                <router-link :to="{path: '/feedbackContent',query:item}">
                  <h4 class="weui-media-box__title">{{item.title}}</h4>
                  <p class="weui-media-box__desc">{{item.content}}</p>
                  <ul class="weui-media-box__info">
                    <li class="weui-media-box__info__meta">{{item.createTime}}</li>
                    <li class="weui-media-box__info__meta weui-media-box__info__meta_extra">{{item.read===1?'已读':'未读'}}</li>
                  </ul>
                </router-link>
              </div>
            </div>
            <div class="weui-panel__ft" @click="loadMore" v-if="params.current<params.pages">
              <a href="javascript:void(0);" class="weui-cell weui-cell_access weui-cell_link">
                <div class="weui-cell__bd">查看更多</div>
                <span class="weui-cell__ft"></span>
              </a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import mySelect from '@/components/select.vue'
  import PullTo from 'vue-pull-to';

  export default {
    components: {
      PullTo,
      mySelect,
    },
    data() {
      return {
        params: {
          current: 1,
          pages: 0,
          size: 10,
          total: 0
        },
        postData: {
          content: '',
          title: ''
        },
        menu: 0,
        list: [],

      }
    },
    methods: {
      menuChange(val) {
        this.menu = val;
        this.queryFn();
      },
      loadMore() {
        this.params.size += 5;
        this.queryFn()
      },
      submit() {
        if (!this.postData.title) {
          this.$weui.topTips('标题不能为空');
          return;
        }
        if (!this.postData.content) {
          this.$weui.topTips('请输入反馈内容');
          return;
        }
        this.$http.createFeedback(this.postData).then(resp => {
          Object.assign(this.postData, {content: '', title: ''});
          this.$weui.toast(resp.msg);
        })
        //提交数据
      },
      queryFn() {
        this.$http.fetchFeedback(this.params).then(resp => {
          let data = resp.data;
          this.params.current = data.current;
          this.params.total = data.total;
          this.params.pages = data.pages;
          this.list = data.records;
        })
      },
    },
    created() {
      // this.menu = this.$getR('menu', 0);
    },
    mounted() {
    },
  }
</script>

<style scoped>
  .leave-list {
    height: calc(100% - 5.6rem);
    overflow: auto;
  }

  .submitBtn {
    margin: 1rem auto;
    width: 90%;
  }
</style>
